<template>
  <uni-nav-bar backgroundColor="white" :fixed="true" color="black" borderColor="#efefef" status-bar title="应用列表"/>
  <view class="container">
    <!-- 九宫格容器 -->
    <view class="grid-container">
      <!-- 循环生成九宫格 -->
      <view 
        v-for="(item, index) in gridData" 
        :key="index" 
        class="grid-item"
        @click="navigateTo(item.url)"
      >
        <!-- 图片 -->
        <image 
          :src="item.icon" 
          mode="aspectFit" 
          class="grid-icon"
        />
        <!-- 文字说明 -->
        <text class="grid-text">{{ item.text }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 模拟数据
      gridData: [
        { icon: '/static/my-ico/lx1.png', text: '敬请期待', url: '/pages/index/index' },
        { icon: '/static/my-ico/lx2.png', text: '敬请期待', url: '/pages/category/index' },
		{ icon: '/static/my-ico/lx3.png', text: '敬请期待', url: '/pages/category/index' }
      ]
    }
  },
  methods: {
    // 跳转方法
    navigateTo(url) {
      if(url) {
        uni.navigateTo({
          url: url
        })
      }
    }
  }
}
</script>

<style lang="scss">
.container {
  padding: 20rpx;
  box-sizing: border-box;
}

.grid-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 20rpx; /* 格子间距 */
}

.grid-item {
  width: calc(33.333% - 14rpx); /* 3列，减去间距 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.96);
    opacity: 0.9;
  }
}

.grid-icon {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 16rpx;
}

.grid-text {
  font-size: 28rpx;
  color: #333;
  text-align: center;
}
</style>
